<template>
    
    <div>
       
        <!-- <div style="margin-bottom: 20px;">
            <el-button
              size="small"
              @click="addTab(editableTabsValue)"
            >
              add tab
            </el-button>
          </div>

        <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
            <el-tab-pane
              v-for="item in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name"
            >
              {{item.content}}
            </el-tab-pane>
          </el-tabs> -->





          <div >



           <!--  //动态游戏图片轮播 -->
        <template >
            
            <el-carousel :interval="5000" arrow="always" type="card" >
              <el-carousel-item v-for="item in GameList" :key="item.id">
               
                <div style="position: relative;display: flex;justify-content: center;align-items: center;border-radius: 5px;overflow: hidden; ">
                  <span style="position: absolute; top: 5px; right: 5px; font-size: 32px; color: black; cursor: pointer;">  
                    {{ item.game_name }}</span>

                <img :src="this.baseURL + '/files/' + item.game_image" 
                   style="height: 300px;  object-fit: contain; " />  

            </div>
              </el-carousel-item>
            </el-carousel>




           <!--  //游戏图片列表 -->
            <div >
                <el-row >
                  <el-col :span="6" v-for="item in GameList" :key="item.id" :offset="0">
                    <el-card :body-style="{ padding: '0px' }" overflow="visible"  style="margin-top: 20px; background-color: pink;" class="card-1">
                      <!-- <router-link
                        :to="'/videodisplay?video=' + item.id"
                        style="text-decoration: none"
                      > -->
                        <img :src="this.baseURL + '/files/' + item.game_image" class="image" fit="scale-down" />
                        
                        <div style="padding:14px;">
                        <span>{{ item.name }}</span>
                        <div class="bottom clearfix">


                          <span style="font-weight: bold;">{{ item.game_name }}</span>
                          <el-button type="warning" class="button" @click="selectGame(item.id)">
                            
                            详情
                           
                          </el-button>
                        </div>
                      </div>

                      <!-- </router-link> -->
                    </el-card>
                  </el-col>
                  
                </el-row>
              </div>
          









            
          </template>
        </div>
    </div>
</template>




<script>

import request from '@/request/request.js';
import { baseURL } from '@/request/request.js';

export default {
  data() {
    return {
      baseURL,
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      GameList: [],
      Game: {},

      shop: null,






    };
  },
  methods: {
    load() {
      request.get('/games').then(res => {
        this.GameList = res.data;
      });


    },
    selectGame(id) {
      request.get('/games/' + id).then(res => {
        console.log(res.data);
        if (res.code === "0") {
          this.selectshop(this.user.id, id);
          localStorage.setItem("game", JSON.stringify(res.data));

          this.$router.push({ path: '/gamedetail' });
          /* window.location.reload(); */
        }

      });
    },
    selectshop(userId, gameId) {

      request.get(`/shop/purchased?userId=${userId}&gameId=${gameId}`).then(res => {
        /* this.shop = {...this.shop, ...res.data};
            localStorage.setItem("shop", JSON.stringify(this.shop)); */

        /* localStorage.setItem("shop", JSON.stringify(res.data)); */
        if (res.code === "0") {
          this.shop = res.data;  // 更新响应式属性
          localStorage.setItem("shop", JSON.stringify(res.data));
        } else {
          this.$message.error('获取游戏列表失败');
        }
      }).catch(error => {
        console.error('请求失败:', error);
        this.$message.error('网络错误或服务器不可达');

      });
    },
    /* getImgUrl(image) {
        return 'http://47.99.51.143:9000/files/' + image+'.jpg';
    }, */




  },
  created() {
    this.load();
  },
};
</script>





<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 30px;
  margin-left: 20px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #d9c2ed;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #eebeef;
}










.card-1 {
  width: 300px;
  /* 设置卡片的宽度 */
  height: 400px;
  /* 设置卡片的高度 */

}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 300px;
  display: block;
  height: 300px;

}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>